import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';

@Component({
  selector: 'app-area-pieces-chart',
  templateUrl: './area-pieces-chart.component.html',
  styleUrls: ['./area-pieces-chart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AreaPiecesChartComponent implements OnChanges {
  @Input() givenHeight = '400px';
  @Input() givenDataUnderground;
  @Input() givenArticleData;
  @Input() givenNegArticleData ;
  @Input() giveMaxYaxis = 10;
  options = {};
  constructor() { }

  getHeight() {
    return this.givenHeight;
  }

  ngOnChanges(): void {

    this.options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['文章数', '负情感文章数']
      },
      xAxis: [
        {
          type: 'category',
          data: this.givenDataUnderground,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '文章数',
          min: 0,
          max: this.giveMaxYaxis,
          interval: 5,
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '负情感文章数',
          min: 0,
          max: this.giveMaxYaxis,
          interval: 5,
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name: '文章数',
          type: 'bar',
          data: this.givenArticleData
        },

        {
          name: '负情感文章数',
          type: 'line',
          yAxisIndex: 1,
          data: this.givenNegArticleData
        }
      ]
    };

  }

}
